import { ShopItemWrapper } from "@/styles/shop-item";
import Image from "next/image";
import React, { FC, memo, ReactElement } from "react";
import { IAllProduct, IProducts } from "../type/homeType";

interface IProps {
  children?: ReactElement;
  items?: IProducts;
  shops?: IAllProduct;
}

const ShopItem: FC<IProps> = (props: IProps) => {
  const { items = {} as any, shops = {} as any } = props;

  function labelElement(data: any) {
    if (data.couponLabelDesc !== null) {
      return (
        <div>
          <span className="label">{data.couponLabelDesc}</span>
          <span className="text">{data.name}</span>
        </div>
      );
    } else {
      return <span className="text">{data.name}</span>;
    }
  }

  function infoElement() {
    if (Object.keys(items).length !== 0) {
      return (
        <>
          <Image width={263} src={items.coverUrl} height={263} alt="" />
          <div className="info">{labelElement(items)}</div>
          <div className="price">￥{items.originalCost}</div>
        </>
      );
    } else {
      return (
        <>
          <Image width={263} src={shops.coverUrl} height={263} alt="" />
          <div className="info">{labelElement(shops)}</div>
          <div className="price">￥{shops.originalCost}</div>
        </>
      );
    }
  }

  return <ShopItemWrapper>{infoElement()}</ShopItemWrapper>;
};

export default memo(ShopItem);
